<template>
  <div class='gfb'>
    <div class="myinfo info-name">昵称：{{name}}</div>
    <div class="myinfo info-wechat">微信：{{wechat}}</div>
		<div class="myinfo modify" @click="show()">修改信息</div>
	  <div class="myinfo del" @click="del()">注销</div>
    <br>
    <hr>
    <br>
    <div class="members">
      <div class="member" v-for="userObj in Chat.onlineUsers" @click="showWeChat(userObj)">
        <div class="header">
        </div>
        <div class="name">
          <div class='name-1'>{{userObj.UserName}}</div>
          <div class='name-2'>{{userObj.WeChat}}</div>
        </div>
      </div>
      <!-- 占位 -->
      <div class="member" v-for="i in 9">
      </div>
    </div>
    <mydialog v-if="isShow" :fast-close="false">
      <div class="modify-box">
        <div class="name">
          <label>群昵称：</label>
          <input type="text" v-model="name" placeholder="10字以内">
        </div>
        <div class="wechat">
          <label>微信号：</label>
          <input type="text" v-model="wechat" placeholder="方便私聊（选填）">
        </div>
        <div class="save">
          <span class="btn g" @click="save()">保存</span>
          <span class="btn r" @click="saveClose()">算了算了，就这样吧</span>
        </div>
      </div>
    </mydialog>
    <mydialog v-show="isShowF">
      <div class="f-info">
        <div class="name">
          <label>群昵称：</label>
          <input disabled="true" type="text" v-model="fname" placeholder="">
        </div>
        <div class="wechat">
          <label>微信号：</label>
          <input disabled="true" type="text"v-model="fweichat" placeholder="不告诉你，群里自己要">
        </div>
        <div class="save">
          <span class="btn g" @click="closeF()">关闭</span>
        </div>
      </div>
    </mydialog>
  </div>
</template>
<script>
import Chat from '../api/client'
import mydialog from './util/dialog'
export default {
  data () {
    return {
      Chat: Chat,
      name: '',
      id: '321',
      wechat: '你好像没填微信',
      fname: '',
      fweichat: '',
      isShowF: false,
      isShow: false
    }
  },
  components: {
    mydialog
  },
  mounted () {
    if (localStorage.name) {
      this.name = localStorage.name
    }
    if (localStorage.wechat) {
      this.wechat = localStorage.wechat
    }
    if (localStorage.uid) {
      this.id = localStorage.uid
    }
  },
  methods: {
    showWeChat (userObj) {
      console.log(userObj)
      this.fname = userObj.UserName
      this.fweichat = userObj.WeChat
      this.isShowF = true
    },
    del () {
      if (localStorage) {
        localStorage.removeItem('name')
        localStorage.removeItem('uid')
        localStorage.removeItem('weichat')
      }
      console.log(Chat)
      this.$router.push('/login')
      this.Chat.logout()
    },
    closeF () {
      this.isShowF = false
    },
    show () {
      this.isShow = true
    },
    save () {
      if (this.name !== '') {
        this.name = this.name.slice(0, 10)
      }
      if (localStorage) {
        localStorage.setItem('name', this.name)
        localStorage.setItem('wechat', this.wechat)
      }
      this.isShow = false
      this.Chat.changeInfo()
      window.location.reload()
      // this.$router.push({path: '/room', query: {refresh: true}})
    },
    saveClose () {
      this.isShow = false
    }
  }
}
</script>
<style scoped>
.gfb{
  height:100%;
}
.members{
  height:50%;
  overflow-y:auto;
}
.member{
  overflow:hidden;
  padding:5px 10px;
}
.member .header{
  width:40px;height:40px;
  background:#3CAF36;
  border-radius:50%;
  -webkit-border-radius:50%;
  overflow:hidden;
  float:left;
}
.member .name{
  float:left;
  margin-left:10px;
  line-height:20px;
}
.member .name .name-1{
  font-size:16px;
  color:#333;
}
.member .name .name-2{
  font-size:12px;
  color:#999;
}
.myinfo{
  text-align:center;
  font-size:14px;
  padding:10px 0;
}
.info-name,.info-wechat{
  border-bottom:1px dashed #ccc;
}
.modify{
  margin: 20px 0 0;
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
.del{
  margin: 20px 0 0;
  background: -webkit-linear-gradient(left top, #F0F4F7 , #ff0000);
  background: -o-linear-gradient(top right, #F0F4F7, #ff0000);
  background: -moz-linear-gradient(top right, #F0F4F7, #ff0000);
  background: linear-gradient(to top right, #F0F4F7 , #ff0000);
}
.f-info,.modify-box{
  text-align:center;
}
.modify-box{
  line-height:30px;
}
.modify-box input{
  line-height:30px;
  width:80%;
  padding:0 10px;
  border:0 none;
}
.modify-box .wechat{
  margin:10px 0 ;
}
.btn {
  display:block;
  cursor:pointer;
  margin:10px auto 0;
  width:80%;
  padding:0 10px;
}
.btn.g{
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
.btn.r{
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
.f-info .btn{
  line-height:2;
}
.f-info .name,
.f-info .wechat{
  line-height:2;
  margin:20px 0;
}
.f-info .name input,
.f-info .wechat input{
  line-height:2;
  border:0 none;
  padding:0 10px;
  background: -webkit-linear-gradient(left top, #F0F4F7 , #3CAF36);
  background: -o-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: -moz-linear-gradient(top right, #F0F4F7, #3CAF36);
  background: linear-gradient(to top right, #F0F4F7 , #3CAF36);
}
</style>
